<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr  v-for="(brand,i) in brands"  align="center">
            <td>{{brand.id}}===数组下标{{i}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.status}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>

    </table>
</div>
</body>
<script>
    // new Vue({
    //     el:"#app",// 这里面写什么？一般使用div把页面都包进来 #app就是div的ID
    //     data(){   // 数据模型，页面收集的数据（添加、更新），或后台返回的数据(数组）
    //         return {
    //             message:"",  // 单个数据，看实际情况使用
    //             brand:{  // 一个{}代表一个JS对象，其实就是一条数据，一般就是一个表单的数据
    //
    //             },
    //             brands:[  // 服务返回的XXX列表，比如用户列表，套餐列表，菜品列表，一般对应Java返回List
    //                 {},{},{} // 如果有数据，都是模拟数据，一般正式开发时去掉
    //             ]
    //         }
    //     },
    //     methods:{ // 定义函数,建议大家一定要学会控制台打印，方便调试，禁用alter,弹窗
    //         submitData(){
    //
    //         },
    //         addData(){
    //
    //         },
    //         updateData(){
    //
    //         }
    //     },
    //     create(){  // 生命周期函数，方法，一般是根据vue对象的创建、加载、销毁等过程自动调用的
    //
    //     },
    //     mounted() {
    //
    //     }
    // });
</script>
<script>
    // 定义Vue对象 这个对象比作你自己，El控制页面的 data就是数据
    new Vue({
        el:"#app",// vue对象覆盖的区域(html元素)，一般使用div把页面都包进来 #app就是div的ID
        data(){ // 数据模型，页面的数据，后台返回的数据
            // 造模拟数据 工作之后，前端工程师在没有后台数据时，都是造假数据，先要效果
            return {
                brands:[
                    {
                        id:"1001",
                        brandName:"黑马程序员",
                        companyName:"传智教育",
                        ordered:1,
                        description:"好",
                        status:1
                    },
                    {
                        id:"1002",
                        brandName:"松哥课堂",
                        companyName:"传智教育",
                        ordered:1,
                        description:"好",
                        status:1
                    }
                ]
            }
        },
        methods:{ // 事件

        },
        created(){
            // 生命周期方法自动调用的
            console.log("生命周期方法...created");
            console.log("el:",this.$el);
            console.log("data:",this.$data)
        },
        mounted(){
            console.log("生命周期方法...mounted");
            console.log("el:",this.$el);
            console.log("data:",this.$data)
            // 如果页面加载后，调用方法，就在这里写
            // 发送get请求，获取所有的品牌列表
            // ()=>{} 箭头函数，这个ES6语法，和Vue整合的比较好
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then((resp)=>{
                // resp.data 返回的数据，我们要赋值给谁？
                // 更新数据，当更新数据时，Vue对象自动更新页面的，此时一定el是创建的
                this.brands = resp.data;
            });
        }
    });
</script>
<script>
    // 页面一加载就执行，先注释
    // window.onload是页面加载后，调用axios请求，现在我们要使用vue来做
    window.onload = function (){
        //2. 发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp) {
            let brands = resp.data;
            let tableData = " <tr>\n" +
                "        <th>序号</th>\n" +
                "        <th>品牌名称</th>\n" +
                "        <th>企业名称</th>\n" +
                "        <th>排序</th>\n" +
                "        <th>品牌介绍</th>\n" +
                "        <th>状态</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>";
            for (let i = 0; i < brands.length ; i++) {
                let brand = brands[i];
                tableData += "\n" +
                    "    <tr align=\"center\">\n" +
                    "        <td>"+(i+1)+"</td>\n" +
                    "        <td>"+brand.brandName+"</td>\n" +
                    "        <td>"+brand.companyName+"</td>\n" +
                    "        <td>"+brand.ordered+"</td>\n" +
                    "        <td>"+brand.description+"</td>\n" +
                    "        <td>"+brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>";
            }
            // 更新页面，暂时注释
            //document.getElementById("brandTable").innerHTML = tableData;
        });
    }
</script>
</html>